<template>
  <!-- 三级菜单 -->
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select v-model="categoryStore.c1CategorySelectId" @change="c1IdChangeHandler" :disabled="scenes==0?false:true">
            <!-- option选项 label为显示的数据；value为下拉菜单收集的数据 -->
            <el-option v-for="(c1) in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="二级分类">
          <el-select v-model="categoryStore.c2CategorySelectId" @change="c2IdChangeHandler" :disabled="scenes==0?false:true">
            <el-option v-for="(c2) in categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select v-model="categoryStore.c3CategorySelectId" :disabled="scenes==0?false:true">
            <el-option v-for="(c3) in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
// 引入生命周期钩子
import { onMounted, defineProps } from 'vue'
// 引入分类小仓库
import useCategoryStore from '@/store/modules/category'
let categoryStore = useCategoryStore()

// 组件挂载成功后执行
onMounted(() => {
  // 每次组件挂载前先清选中的值，防止多个组件中都包含分类组件在路由切换的时候会有之前选中的分类id信息
  categoryStore.c1CategorySelectId = ''
  categoryStore.c2CategorySelectId = ''
  categoryStore.c3CategorySelectId = ''
  // 每次组件挂载成功后去获取cid
  categoryStore.getC1()
})

// 当一级分类下拉菜单的change事件（选中值的时候触发，保证一级分类的id有值）
const c1IdChangeHandler = ()=> {
  // 改变一级分类下拉菜单前，先清空二级分类的id，三级分类的id和数据
  categoryStore.c2CategorySelectId = ''
  categoryStore.c3CategorySelectId = ''
  categoryStore.c3Arr = []
  // 获取二级分类的数据
  categoryStore.getC2()
}

// 当二级分类下拉菜单的change事件（选中值的时候触发，保证二级分类的id有值）
const c2IdChangeHandler = ()=> {
  // 改变二级分类下拉菜单前，先清空三级分类的id
  categoryStore.c3CategorySelectId = ''
  // 获取三级分类的数据
  categoryStore.getC3()
}

// 接口父组件传递过来的scenes属性，从而来决定是否禁用三个下拉菜单
defineProps(['scenes'])
</script>

<script lang="ts">
export default {
  // 三级分类全局组件
  name: 'Category',
}
</script>
<style scoped></style>
